<template>
  <div class="charts">
<!--    &lt;!&ndash;  矿区——数据分析可视化&ndash;&gt;-->
<!--    <div class="sub-title">-->
<!--      <span>辽阳——红阳三矿数据分析可视化</span>-->
<!--    </div>-->
    <!--    时间选择器-->
    <div class="charts-dataPicker">
      <div class="dt-containner">
        <label>
          <span>起始时间</span>
          <input type="date" id="start_time" v-model="start_time" @input="switchTime"/>
        </label>
      </div>
      <span style="color: #fff">——</span>
      <div class="dt-containner">
        <label>
          <span>终止时间</span
          ><input type="date" id="end_time" v-model="end_time" @input="switchTime"/>
        </label>
      </div>
    </div>
    <!--  顶部两个饼图 能量饼图，事件发生饼图-->
    <div class="top-pie">
      <div class="pie-one" ref="energy_pie"></div>
    </div>
    <div class="top-pie">
      <div class="pie-two" ref="accident_pie"></div>
    </div>
    <!--  中间两个折线图  发生次数折线图，能量折线图-->
    <div class="mid-line">
      <div class="line-one" ref="happen_line"></div>
      <div class="line-two" ref="energy_line"></div>
    </div>
    <!--  底部两个饼状图 破坏类型饼图，破坏程度饼图-->
    <div class="down-pie">
      <div class="pie-three" ref="destroyType_pie"></div>
    </div>
    <div class="down-pie">
      <div class="pie-four" ref="destroyLevel_pie"></div>
    </div>
    <!--    解决底部导航栏遮盖down-pie的办法-->
    <div class="stone"></div>
  </div>
</template>

<script>
import echarts from "echarts/lib/echarts";
import "echarts/lib/chart/pie";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import axios from "axios";
import qs from "qs";
import {Indicator, Toast} from 'mint-ui';
import globalObj from "@/common";

export default {
  name: "Charts",
  data() {
    return {
      //设置起止时间的默认值，加载半年的数据
      start_time: "2020-01-01",
      end_time: "2020-06-30",
    };
  },
  mounted() {
    Indicator.open("正在加载");
    setTimeout(() => {
      Indicator.close();
    }, 2000);
    //页面初始化加载
    let energyPieChart = echarts.init(this.$refs.energy_pie);
    let accidentPieChart = echarts.init(this.$refs.accident_pie);
    let happenLineChart = echarts.init(this.$refs.happen_line);
    let energyLineChart = echarts.init(this.$refs.energy_line);
    let destroyTypePieChart = echarts.init(this.$refs.destroyType_pie);
    let destroyLevelPieChart = echarts.init(this.$refs.destroyLevel_pie);

    //能量饼图加载数据
    var five_and_four;
    var seven_and_six;
    var eight_and_seven;
    var above_nine;
    var nine_and_eight;
    var six_and_five;
    axios.post(
        "http://www.cdmw-lnu.cn:8999/appServer/req_energy_pie.do",
        qs.stringify({
          spot_name: globalObj.spot_name,
          load_start_time: this.start_time,
          load_end_time: this.end_time
        }),
        {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then(res => {
      Toast({
        message: "正在显示" + this.start_time + "至" + this.end_time + "的数据分析",
        position: 'top',
        duration: 2000
      });
      //将返回的res值进行格式化
      // console.log('回传值：' + res.data.five_and_four);
      five_and_four = res.data.five_and_four;
      seven_and_six = res.data.seven_and_six;
      eight_and_seven = res.data.eight_and_seven;
      above_nine = res.data.above_nine;
      nine_and_eight = res.data.nine_and_eight;
      six_and_five = res.data.six_and_five;
      //能量饼图
      energyPieChart.setOption({
        title: {
          text: "能量图",
          left: "center",
          textStyle: {
            color: "#fff"
          }
        },
        legend: {
          orient: "vertical",
          left: 0,
          top: 20,
          data: [">10^9", ">10^8", ">10^7", ">10^6", ">10^5", ">10^4"],
          textStyle: {
            fontSize: "12",
            fontWeight: "bold",
            color: "#f5f5f5"
          }
        },
        color: [
          "rgb(194,53,49)",
          "rgb(224,98,173)",
          "rgb(234,126,83)",
          "rgb(32,106,255)",
          "rgb(97,160,168)",
          "rgb(82,129,51)"
        ],
        series: [
          {
            name: "垮塌事故比率",
            type: "pie",
            radius: ["0%", "80%"],
            //这个属性专属调节饼状图图表位置  [‘左右’，‘上下’]
            center: ["60%", "54%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "inner",
                formatter: "{d}%",
                textStyle: {
                  fontWeight: "normal",
                  fontSize: 12
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "15",
                fontWeight: "bold"
              }
            },

            labelLine: {
              show: false
            },
            data: [
              // console.log(above_nine),
              {value: above_nine, name: ">10^9"},
              {value: nine_and_eight, name: ">10^8"},
              {value: eight_and_seven, name: ">10^7"},
              {value: seven_and_six, name: ">10^6"},
              {value: six_and_five, name: ">10^5"},
              {value: five_and_four, name: ">10^4"}
            ]
          }
        ]
      });
    }).catch(e => {
      console.log("请求失败", e);
      Toast({
        message: "请检查网络",
        position: 'top',
        duration: 2000
      });
    });

    //事件发生折线图加载数据
    var happen_time = [];
    var time = [];
    axios.post(
        "http://www.cdmw-lnu.cn:8999/appServer/req_happen_line.do",
        qs.stringify({
          spot_name: globalObj.spot_name,
          load_start_time: this.start_time,
          load_end_time: this.end_time
        }), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          }
        }).then(res => {
      // console.log(JSON.parse(JSON.stringify(res.data[0].happen_time)));
      for (let i = 0; i < res.data.length; i++) {
        happen_time.push(res.data[i].happen_time);
        time.push(res.data[i].time);
      }
      //事件发生折线图
      happenLineChart.setOption({
        title: {
          text: "事件发生",
          left: "center",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          x: 40,
          y: 30,
          x2: 30,
          y2: 20
        },
        xAxis: {
          data: time,
          /*改变x轴颜色*/
          axisLine: {
            lineStyle: {
              color: "#ffffff",
              width: 1 //这里是为了突出显示加上的
            }
          }
        },
        yAxis: {
          name: "发生次数",
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#ffffff",
              width: 1 //这里是为了突出显示加上的
            }
          }
        },
        series: [
          {
            name: "当日发生次数",
            data: happen_time,
            type: "line",
            smooth: true
          }
        ]
      });
    }).catch(e => {
      console.log("请求失败", e);
    });

    //能量变化折线图加载数据
    let energyXdata = [];
    let energyYdata = [];
    axios.post(
        "http://www.cdmw-lnu.cn:8999/appServer/req_energy_line.do",
        qs.stringify({
          spot_name: globalObj.spot_name,
          load_start_time: this.start_time,
          load_end_time: this.end_time
        }),
        {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          }
        }).then(res => {
      console.log(res.data);
      for (let i = 0; i < res.data.length; i++) {
        energyXdata.push(res.data[i].time);
        energyYdata.push(res.data[i].energy);
      }
      //能量变化折线图
      energyLineChart.setOption({
        title: {
          text: "能量变化",
          left: "center",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "axis",
          // position: function (pt) {
          //     return [pt[0], '30%'];
          // }
          position: [50, 50]
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none"
            },
            restore: {},
            saveAsImage: {}
          }
        },
        grid: {
          x: 55,
          y: 29,
          x2: 46,
          y2: 50
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: energyXdata,
          axisLine: {
            lineStyle: {
              color: "#ffffff",
              width: 1 //这里是为了突出显示加上的
            }
          }
        },
        yAxis: {
          type: "value",
          name: "能量/10^4J",
          boundaryGap: [0, "100%"],
          axisLine: {
            lineStyle: {
              color: "#ffffff",
              width: 1 //这里是为了突出显示加上的
            }
          }
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 30
          },
          {
            start: 0,
            end: 10,
            handleIcon:
                "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
            handleSize: "50%",
            handleStyle: {
              color: "#fff",
              shadowBlur: 3,
              shadowColor: "rgba(0, 0, 0, 0.6)",
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }
        ],
        series: [
          {
            name: "能量(*10^4J)",
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "average",
            itemStyle: {
              color: "rgb(255, 70, 131)"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 158, 68)"
                },
                {
                  offset: 1,
                  color: "rgb(255, 70, 131)"
                }
              ])
            },
            data: energyYdata
          }
        ]
      });

    });

    //破坏类型饼图加载数据
    let above_zps;
    let bt_zpf_and_zps;
    let below_zpf;
    axios.post(
        'http://www.cdmw-lnu.cn:8999/appServer/req_destrType_pie.do',
        qs.stringify({
          spot_name: globalObj.spot_name,
          load_start_time: this.start_time,
          load_end_time: this.end_time
        }),
        {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          }
        }).then(res => {
      above_zps = res.data.above_zps;
      bt_zpf_and_zps = res.data.bt_zpf_and_zps;
      below_zpf = res.data.below_zpf;
      //破坏类型饼状图
      destroyTypePieChart.setOption({
        title: {
          text: "破坏类型",
          left: "center",
          textStyle: {
            color: "#fff"
          }
        },
        legend: {
          orient: "vertical",
          left: 0,
          top: 20,
          data: ["剪切", "张拉", "混合"],
          textStyle: {
            fontSize: "12",
            fontWeight: "bold",
            color: "#f5f5f5"
          }
        },
        color: ["rgb(194,53,49)", "rgb(47,69,84)", "rgb(234,126,83)"],
        series: [
          {
            name: "破坏类型发生比率",
            type: "pie",
            radius: ["0%", "80%"],
            //这个属性专属调节饼状图图表位置  [‘左右’，‘上下’]
            center: ["60%", "54%"],
            avoidLabelOverlap: true,
            label: {
              normal: {
                show: true,
                position: "inner",
                formatter: "{d}%",
                textStyle: {
                  fontWeight: "normal",
                  fontSize: 12
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "15",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: above_zps, name: "剪切"},
              {value: below_zpf, name: "张拉"},
              {value: bt_zpf_and_zps, name: "混合"}
            ]
          }
        ]
      });
    });

    //破坏程度饼状图加载数据
    let severety;
    let nomal;
    let venial;
    axios.post(
        'http://www.cdmw-lnu.cn:8999/appServer/req_destrLevel_pie.do',
        qs.stringify({
          spot_name: globalObj.spot_name,
          load_start_time: this.start_time,
          load_end_time: this.end_time
        }), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          }
        }).then(res => {
      severety = res.data.severety;
      nomal = res.data.nomal;
      venial = res.data.venial;
      //破坏程度饼状图
      destroyLevelPieChart.setOption({
        title: {
          text: "破坏程度",
          left: "center",
          textStyle: {
            color: "#fff"
          }
        },
        legend: {
          orient: "vertical",
          left: 1,
          top: 20,
          data: ["严重", "一般", "轻微"],
          textStyle: {
            fontSize: "12",
            fontWeight: "bold",
            color: "#f5f5f5"
          }
        },
        color: ["rgb(194,53,49)", "rgb(32,106,255)", "rgb(189,142,62)"],
        series: [
          {
            name: "破坏程度",
            type: "pie",
            radius: ["0%", "80%"],
            //这个属性专属调节饼状图图表位置  [‘左右’，‘上下’]
            center: ["60%", "54%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "inner",
                formatter: "{d}%",
                textStyle: {
                  fontWeight: "normal",
                  fontSize: 12
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "15",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: severety, name: "严重"},
              {value: nomal, name: "一般"},
              {value: venial, name: "轻微"}
            ]
          }
        ]
      });
    });

    //垮塌事故饼图——该图为静态的
    accidentPieChart.setOption({
      title: {
        text: "垮塌事故",
        left: "center",
        textStyle: {
          color: "#fff"
        }
      },
      legend: {
        orient: "vertical",
        left: 0,
        top: 20,
        data: ["煤体压缩", "顶板断裂", "断层错动"],
        textStyle: {
          fontSize: "12",
          fontWeight: "bold",
          color: "#f5f5f5"
        }
      },
      color: ["rgb(103,224,227)", "rgb(212,130,101)", "rgb(97,160,168)"],
      series: [
        {
          name: "垮塌事故比率",
          type: "pie",
          radius: ["0%", "80%"],
          //这个属性专属调节饼状图图表位置  [‘左右’，‘上下’]
          center: ["60%", "54%"],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: true,
              position: "inner",
              formatter: "{d}%",
              textStyle: {
                fontWeight: "normal",
                fontSize: 12
              }
            }
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "15",
              fontWeight: "bold"
            }
          },

          labelLine: {
            show: false
          },
          data: [
            {value: 17, name: "煤体压缩"},
            {value: 5, name: "顶板断裂"},
            {value: 9, name: "断层错动"}
          ]
        }
      ]
    });
  },
  methods: {
    //时间切换方法
    switchTime: function () {
      //由于是通过最后一个终止时间框作为相应的方法
      //1.首先判断起始时间是否为空或者时间离谱
      var startTime = new Date(this.start_time);
      var upLimit = new Date("2022-01-01");
      var lowLimit = new Date("2019-06-06");
      if (this.start_time.length === 0 || startTime < lowLimit || startTime > upLimit || this.end_time.length === 0) {
        Toast({
          message: "时间格式不正确,请重新选择",
          duration: 2500,
          position: 'top'
        })
      } else {
        Indicator.open("正在加载");
        setTimeout(() => {
          Indicator.close();
        }, 2000);
        //声明图表
        let energyPieChart = echarts.init(this.$refs.energy_pie);
        let happenLineChart = echarts.init(this.$refs.happen_line);
        let energyLineChart = echarts.init(this.$refs.energy_line);
        let destroyTypePieChart = echarts.init(this.$refs.destroyType_pie);
        let destroyLevelPieChart = echarts.init(this.$refs.destroyLevel_pie);
        //请求数据
        //能量饼图加载数据
        var five_and_four;
        var seven_and_six;
        var eight_and_seven;
        var above_nine;
        var nine_and_eight;
        var six_and_five;
        axios.post(
            "http://www.cdmw-lnu.cn:8999/appServer/req_energy_pie.do",
            qs.stringify({
              spot_name: globalObj.spot_name,
              load_start_time: this.start_time,
              load_end_time: this.end_time
            }),
            {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }).then(res => {
          Toast({
            message: "正在显示" + this.start_time + "至" + this.end_time + "的数据分析",
            position: 'top',
            duration: 2000
          });
          //将返回的res值进行格式化
          // console.log('回传值：' + res.data.five_and_four);
          five_and_four = res.data.five_and_four;
          seven_and_six = res.data.seven_and_six;
          eight_and_seven = res.data.eight_and_seven;
          above_nine = res.data.above_nine;
          nine_and_eight = res.data.nine_and_eight;
          six_and_five = res.data.six_and_five;
          //能量饼图
          energyPieChart.setOption({
            title: {
              text: "能量图",
              left: "center",
              textStyle: {
                color: "#fff"
              }
            },
            legend: {
              orient: "vertical",
              left: 0,
              top: 20,
              data: [">10^9", ">10^8", ">10^7", ">10^6", ">10^5", ">10^4"],
              textStyle: {
                fontSize: "12",
                fontWeight: "bold",
                color: "#f5f5f5"
              }
            },
            color: [
              "rgb(194,53,49)",
              "rgb(224,98,173)",
              "rgb(234,126,83)",
              "rgb(32,106,255)",
              "rgb(97,160,168)",
              "rgb(82,129,51)"
            ],
            series: [
              {
                name: "垮塌事故比率",
                type: "pie",
                radius: ["0%", "80%"],
                //这个属性专属调节饼状图图表位置  [‘左右’，‘上下’]
                center: ["60%", "54%"],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: true,
                    position: "inner",
                    formatter: "{d}%",
                    textStyle: {
                      fontWeight: "normal",
                      fontSize: 12
                    }
                  }
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: "15",
                    fontWeight: "bold"
                  }
                },

                labelLine: {
                  show: false
                },
                data: [
                  // console.log(above_nine),
                  {value: above_nine, name: ">10^9"},
                  {value: nine_and_eight, name: ">10^8"},
                  {value: eight_and_seven, name: ">10^7"},
                  {value: seven_and_six, name: ">10^6"},
                  {value: six_and_five, name: ">10^5"},
                  {value: five_and_four, name: ">10^4"}
                ]
              }
            ]
          });
        }).catch(e => {
          console.log("请求失败", e);
          Toast({
            message: "请检查网络",
            position: 'top',
            duration: 2000
          });
        });

        //事件发生折线图加载数据
        var happen_time = [];
        var time = [];
        axios.post(
            "http://www.cdmw-lnu.cn:8999/appServer/req_happen_line.do",
            qs.stringify({
              spot_name: globalObj.spot_name,
              load_start_time: this.start_time,
              load_end_time: this.end_time
            }), {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
              }
            }).then(res => {
          // console.log(JSON.parse(JSON.stringify(res.data[0].happen_time)));
          for (let i = 0; i < res.data.length; i++) {
            happen_time.push(res.data[i].happen_time);
            time.push(res.data[i].time);
          }
          //事件发生折线图
          happenLineChart.setOption({
            title: {
              text: "事件发生",
              left: "center",
              textStyle: {
                color: "#fff"
              }
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                label: {
                  backgroundColor: "#6a7985"
                }
              }
            },
            toolbox: {
              show: true,
              feature: {
                saveAsImage: {}
              }
            },
            grid: {
              x: 40,
              y: 30,
              x2: 30,
              y2: 20
            },
            xAxis: {
              data: time,
              /*改变x轴颜色*/
              axisLine: {
                lineStyle: {
                  color: "#ffffff",
                  width: 1 //这里是为了突出显示加上的
                }
              }
            },
            yAxis: {
              name: "发生次数",
              type: "value",
              axisLine: {
                lineStyle: {
                  color: "#ffffff",
                  width: 1 //这里是为了突出显示加上的
                }
              }
            },
            series: [
              {
                name: "当日发生次数",
                data: happen_time,
                type: "line",
                smooth: true
              }
            ]
          });
        }).catch(e => {
          console.log("请求失败", e);
        });

        //能量变化折线图加载数据
        let energyXdata = [];
        let energyYdata = [];
        axios.post(
            "http://www.cdmw-lnu.cn:8999/appServer/req_energy_line.do",
            qs.stringify({
              spot_name: globalObj.spot_name,
              load_start_time: this.start_time,
              load_end_time: this.end_time
            }),
            {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
              }
            }).then(res => {
          for (let i = 0; i < res.data.length; i++) {
            energyXdata.push(res.data[i].time);
            energyYdata.push(res.data[i].energy);
          }
          //能量变化折线图
          energyLineChart.setOption({
            title: {
              text: "能量变化",
              left: "center",
              textStyle: {
                color: "#fff"
              }
            },
            tooltip: {
              trigger: "axis",
              // position: function (pt) {
              //     return [pt[0], '30%'];
              // }
              position: [50, 50]
            },
            toolbox: {
              feature: {
                dataZoom: {
                  yAxisIndex: "none"
                },
                restore: {},
                saveAsImage: {}
              }
            },
            grid: {
              x: 55,
              y: 29,
              x2: 46,
              y2: 50
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: energyXdata,
              axisLine: {
                lineStyle: {
                  color: "#ffffff",
                  width: 1 //这里是为了突出显示加上的
                }
              }
            },
            yAxis: {
              type: "value",
              name: "能量/10^4J",
              boundaryGap: [0, "100%"],
              axisLine: {
                lineStyle: {
                  color: "#ffffff",
                  width: 1 //这里是为了突出显示加上的
                }
              }
            },
            dataZoom: [
              {
                type: "inside",
                start: 0,
                end: 30
              },
              {
                start: 0,
                end: 10,
                handleIcon:
                    "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
                handleSize: "50%",
                handleStyle: {
                  color: "#fff",
                  shadowBlur: 3,
                  shadowColor: "rgba(0, 0, 0, 0.6)",
                  shadowOffsetX: 2,
                  shadowOffsetY: 2
                }
              }
            ],
            series: [
              {
                name: "能量(*10^4J)",
                type: "line",
                smooth: true,
                symbol: "none",
                sampling: "average",
                itemStyle: {
                  color: "rgb(255, 70, 131)"
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgb(255, 158, 68)"
                    },
                    {
                      offset: 1,
                      color: "rgb(255, 70, 131)"
                    }
                  ])
                },
                data: energyYdata
              }
            ]
          });

        });

        //破坏类型饼图加载数据
        let above_zps;
        let bt_zpf_and_zps;
        let below_zpf;
        axios.post(
            'http://www.cdmw-lnu.cn:8999/appServer/req_destrType_pie.do',
            qs.stringify({
              spot_name: globalObj.spot_name,
              load_start_time: this.start_time,
              load_end_time: this.end_time
            }),
            {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
              }
            }).then(res => {
          above_zps = res.data.above_zps;
          bt_zpf_and_zps = res.data.bt_zpf_and_zps;
          below_zpf = res.data.below_zpf;
          //破坏类型饼状图
          destroyTypePieChart.setOption({
            title: {
              text: "破坏类型",
              left: "center",
              textStyle: {
                color: "#fff"
              }
            },
            legend: {
              orient: "vertical",
              left: 0,
              top: 20,
              data: ["剪切", "张拉", "混合"],
              textStyle: {
                fontSize: "12",
                fontWeight: "bold",
                color: "#f5f5f5"
              }
            },
            color: ["rgb(194,53,49)", "rgb(47,69,84)", "rgb(234,126,83)"],
            series: [
              {
                name: "破坏类型发生比率",
                type: "pie",
                radius: ["0%", "80%"],
                //这个属性专属调节饼状图图表位置  [‘左右’，‘上下’]
                center: ["60%", "54%"],
                avoidLabelOverlap: true,
                label: {
                  normal: {
                    show: true,
                    position: "inner",
                    formatter: "{d}%",
                    textStyle: {
                      fontWeight: "normal",
                      fontSize: 12
                    }
                  }
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: "15",
                    fontWeight: "bold"
                  }
                },
                labelLine: {
                  show: false
                },
                data: [
                  {value: above_zps, name: "剪切"},
                  {value: below_zpf, name: "张拉"},
                  {value: bt_zpf_and_zps, name: "混合"}
                ]
              }
            ]
          });
        });

        //破坏程度饼状图加载数据
        let severety;
        let nomal;
        let venial;
        axios.post(
            'http://www.cdmw-lnu.cn:8999/appServer/req_destrLevel_pie.do',
            qs.stringify({
              spot_name: globalObj.spot_name,
              load_start_time: this.start_time,
              load_end_time: this.end_time
            }), {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
              }
            }).then(res => {
          severety = res.data.severety;
          nomal = res.data.nomal;
          venial = res.data.venial;
          //破坏程度饼状图
          destroyLevelPieChart.setOption({
            title: {
              text: "破坏程度",
              left: "center",
              textStyle: {
                color: "#fff"
              }
            },
            legend: {
              orient: "vertical",
              left: 1,
              top: 20,
              data: ["严重", "一般", "轻微"],
              textStyle: {
                fontSize: "12",
                fontWeight: "bold",
                color: "#f5f5f5"
              }
            },
            color: ["rgb(194,53,49)", "rgb(32,106,255)", "rgb(189,142,62)"],
            series: [
              {
                name: "破坏程度",
                type: "pie",
                radius: ["0%", "80%"],
                //这个属性专属调节饼状图图表位置  [‘左右’，‘上下’]
                center: ["60%", "54%"],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: true,
                    position: "inner",
                    formatter: "{d}%",
                    textStyle: {
                      fontWeight: "normal",
                      fontSize: 12
                    }
                  }
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: "15",
                    fontWeight: "bold"
                  }
                },
                labelLine: {
                  show: false
                },
                data: [
                  {value: severety, name: "严重"},
                  {value: nomal, name: "一般"},
                  {value: venial, name: "轻微"}
                ]
              }
            ]
          });
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/style/main";

@mixin pie-containner {
  height: px2rem(500);
  width: 100%;
  border-top: 1px solid gray;
  // border: 1px solid yellow;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

@mixin pie {
  height: px2rem(500);
  width: px2rem(600);
  margin: 0 auto;
  border: 1px solid #fff;
  border-radius: 5px;
}

@mixin line {
  height: px2rem(400);
  width: 100%;
  border-top: 1px solid gray;
}

.charts {
  position: relative;
  text-align: center;
  height: 100%;
  background-image: url("../assets/img/bg.jpg");
  background-size: 100% 100%;

  //.sub-title {
  //  height: px2rem(65);
  //  width: 100%;
  //  text-align: center;
  //  line-height: px2rem(65);
  //  font-size: px2rem(30);
  //  color: #fff;
  //}

  .charts-dataPicker {
    height: px2rem(115);
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid gray;

    .dt-containner {
      height: px2rem(64);
      width: px2rem(350);

      span {
        color: #fff;
      }

      input {
        border-radius: 5px;
        height: px2rem(60);
      }
    }
  }

  .top-pie {
    @include pie-containner;

    .pie-one {
      @include pie;
    }

    .pie-two {
      @include pie;
    }
  }

  .mid-line {
    height: px2rem(800);
    width: 100%;
    display: flex;
    flex-direction: column;
    background-image: url("../assets/img/bg.jpg");
    background-size: 100% 100%;

    .line-one {
      @include line;
    }

    .line-two {
      @include line;
    }
  }

  .down-pie {
    @include pie-containner;
    background-image: url("../assets/img/bg.jpg");
    background-size: 100% 100%;

    .pie-three {
      @include pie;
    }

    .pie-four {
      @include pie;
    }
  }

  .stone {
    height: px2rem(100);
  }
}
</style>
